<template>
  <div id="app">
    <!-- 条件渲染 Header 和 Sidebar -->
    <Header v-if="!hideSidebarAndHeader" />
    <div v-if="!hideSidebarAndHeader" class="container">
      <Sidebar />
      <div class="main-content">
        <router-view />
      </div>
    </div>
    <!-- 登录页面只显示登录内容 -->
    <router-view v-if="hideSidebarAndHeader" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import Header from './components/Header.vue';
import Sidebar from './components/Sidebar.vue';

// 根据当前路由的 meta 信息判断是否隐藏 Sidebar 和 Header
const route = useRoute();
const hideSidebarAndHeader = computed(() => route.meta.hideSidebarAndHeader || false);
</script>

<style scoped>
/* 设置 app 组件的基本布局 */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* 防止页面超出可视区域 */
}

/* container 样式：主要用于设置左侧 Sidebar 和右侧 Main content 的布局 */
.container {
  display: flex;
  flex: 1;
  overflow: hidden; /* 保证内容区域不超出容器 */
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
  overflow-y: auto;
}

/* 样式：控制页面顶部的 Header 与 Sidebar */
header, .sidebar {
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 添加媒体查询，使页面在小屏设备上响应式调整 */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 在小屏设备下，改为垂直布局 */
  }

  .sidebar {
    display: none; /* 小屏时隐藏 Sidebar */
  }
}
</style>
